<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#flash{
		width: 294px;
		height: 539px;
		position: relative;
		border: 3px solid blue;
		margin: 0 auto;
		overflow: hidden;
	}
	#flash .top_img{
		width: 2058px;
		height: 475px;
		position: absolute;
		top: 0;
		left: 0;
	}
	#flash .top_img img{
		float: left;
	}
	#flash .bottom{
		position: absolute;
		top: 469px;
		left: 0px;
		width: 294px;
	}
	#flash .bottom li{
		/*left: left;*/
		list-style: none;
		float: left;
		position: relative;
		width: 42px;
		height: 70px;
	}
	#flash .bottom li.cur{
		background: url(images/bg.png) no-repeat -57px -86px;
	}
	#flash .bottom li.cur img{
		opacity: 1;
		filter: alpha(opacity=100);
	}
	#flash .bottom li img{
		position: absolute;
		top: 7px;
		left: 0px;
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	
$(function(){
	var index = 0;
	var timer = setInterval(autoRun,3000);//设立自动轮播定时器
	function autoRun(){
		index++;
		// if(index = 7){
		// 	index = 0;
		// }
		index  = (index==7)?0:index;//判断index是否到最后一张，到的话就切换到0
		var left = -294*index;//计算left值
		$('#flash .top_img').stop().animate({'left':left+'px'},500);//让上面的div变换left值
		$('#flash .bottom li').eq(index).addClass('cur').siblings('li').removeClass('cur');//变换li的样式
	}

	$('#flash .bottom li').mouseover(function(){//鼠标移入事件
		clearInterval(timer);//清理自动轮播的定时器
		index = $(this).index('li');//获得鼠标移入的li的序号
		var left = -294*index;//计算left值
		$('#flash .top_img').stop().animate({'left':left+'px'},500);//让上面的div变换left值
		$('#flash .bottom li').eq(index).addClass('cur').siblings('li').removeClass('cur');//变换li的样式
	})

	$('#flash .bottom li').mouseout(function(){//鼠标移出事件
		timer = setInterval(autoRun,3000);//设立自动轮播定时器
	})

})
   
</script>
</head>

<body>

	<div id="flash">
		<div class="top_img">
			<img src="images/1.jpg" alt="" />
			<img src="images/2.jpg" alt="" />
			<img src="images/3.jpg" alt="" />
			<img src="images/4.jpg" alt="" />
			<img src="images/5.jpg" alt="" />
			<img src="images/6.jpg" alt="" />
			<img src="images/7.jpg" alt="" />
		</div>

		<ul class="bottom">
			<li class="cur"><img src="images/11.jpg" alt="" /></li>
			<li><img src="images/22.jpg" alt="" /></li>
			<li><img src="images/33.jpg" alt="" /></li>
			<li><img src="images/44.jpg" alt="" /></li>
			<li><img src="images/55.jpg" alt="" /></li>
			<li><img src="images/66.jpg" alt="" /></li>
			<li><img src="images/77.jpg" alt="" /></li>
		</ul>
	</div>

</body>
</html>
